import React, {Component} from 'react';
import Paper from 'material-ui/Paper';
import Avatar from 'material-ui/Avatar';
import FontIcon from 'material-ui/FontIcon';
import IconButton from 'material-ui/IconButton';
import RaisedButton from 'material-ui/RaisedButton';

import { Styles } from '../../styles';

export default class InfoPage extends Component {
  render() {
  	return (
      <div>
        <div 
          className={`${this.props.isExpend ? 'info-page open' : 'info-page'}`} 
          style={{backgroundColor: '#f5f8fa'}}
        ></div>
        <div 
          className={`${this.props.isExpend ? 
            'center-box info-page-content open' : 'main-content info-page-content'
          }`}
        >
          <Paper 
            style={{
              margin: 'auto',
              padding: 0,
              color: '#FF9800',
              backgroundColor: 'transparent',
              display: this.props.isExpend ? 'block' : 'none'
            }}
            className='col-xs-12 col-sm-12 col-md-6 center-block' 
            zDepth={0}
          >
            <div style={{
              padding: 16
            }}>
              <Avatar 
                backgroundColor="transparent"
                color='#FF9800'
                size={168}
                icon={<FontIcon className='icon-star' />}
              />
            </div>
            <div style={{
              padding: 16
            }}>
              <h1 style={styles.h1}>
                IMLOOKE.
              </h1>
              <p className='visible-sm visible-md visible-lg' style={styles.text}>
                大橙子为兴趣相投和有社交需求的大学生提供了综合性的交流平台。<br/>
                在这里你可以自由的发布和发现活动，寻找志同道合的小伙伴，<br/>
                与好友快意聊天，在活动中分享你的惊喜与欢乐。<br/>
                这是一个自由并且奇妙的网站，<br/>
                还等什么？
              </p>
              <p className='visible-xs' style={styles.text}>
                大橙子为兴趣相投和有社交需求的大学生提供了综合性的交流平台。
                在这里你可以自由的发布和发现活动，寻找志同道合的小伙伴，
                与好友快意聊天，在活动中分享你的惊喜与欢乐。<br/>
                这是一个自由并且奇妙的网站，<br/>
                还等什么？
              </p>
              <RaisedButton
                label='开始吧'
                style={{width: 123, marginTop: 12}}
                onTouchTap={this.props.closeInfoPage.bind(this)}
              />
            </div>
          </Paper>
          <div className={Styles.info}>
            <IconButton 
              onClick={this.props.closeInfoPage.bind(this)}>
              <FontIcon 
                className='icon-close'
              />
            </IconButton>
          </div>
        </div>
      </div>
  	);
  }
};

const styles = {
  h1: {
    margin: 0,
    fontSize: 56,
  },
  text: {
    textAlign: 'center',
    color: 'rgba(0, 0, 0, 0.87)',
    lineHeight: 1.428,
    fontSize: 16
  },
};
